<html ng-app="myApp">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>天翼区块链路由器</title>
    <link href="<%=resource%>/imgs/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <link rel="stylesheet" href="<%=resource%>/index.css">
    <script type="text/javascript" src="<%=resource%>/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="<%=resource%>/js/menu.js"></script>
    <script type="text/javascript" src="<%=resource%>/js/map.js"></script>
    <script src="<%=resource%>/angular/angular.js"></script>
    <script src="<%=resource%>/angular/angular-sanitize.min.js"></script>
    <script src="<%=resource%>/angular/angular-animate.min.js"></script>
    <script src="<%=resource%>/js/app/ngapp.js"></script>
    <link href="<%=resource%>/layer/skin/default/layer.css" rel="stylesheet">
    <script src="<%=resource%>/layer/layer.js"></script>
</head>

<body>
<div class="wrap">
    <div id="head">
        <span style="margin-left:60px;"></span><img src="<%=resource%>/imgs/logo.png">
        <span style="margin-left:20px;">天翼区块链路由器</span>
        <a href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</a>
        <a href="http://www.skywindlink.com/" target="_blank">访问官网</a>
        <a class="qrcode">APP下载
            <div class="d">
                <img src="<%=resource%>/imgs/qrcode.jpg">
            </div>
        </a>
    </div>
    <div id="head-phone">
        <div class="h-left">
            <span><img src="<%=resource%>/imgs/logo.png"></span>
            <span class="h-t">天翼区块链路由器</span>
        </div>
        <div class="h-right">
            <a href="http://www.skywindlink.com/" target="blank">访问官网</a><span class="h-line"> | </span><span class="h-app">APP下载</span>
            <img class="h-nav" src="<%=resource%>/imgs/h-nav.png" alt="">
            <div class="d">
                <img src="<%=resource%>/imgs/qrcode.jpg">
            </div>
        </div>
    </div>
    <div id="phone-nav">
        <div class="nav-close"><img src="<%=resource%>/imgs/nav-close.png"></div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "index")%>' style="margin-top: 40px">
            <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
            <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
        </div>
        <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
            <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
        </div>
        <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
            <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
            <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
            <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
        </div>
        <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
            <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
        </div>
        <div class="logout"><span href="javascript:" onclick="logout()" url='<%=luci.dispatcher.build_url("web", "logout")%>'>退出登录</span></div>
    </div>
    <div class="container clearfix">
        <div id="menu">
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "index")%>'>
                <div class="t"><img src="<%=resource%>/imgs/status.png">路由状态</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mnetwork")%>'>
                <div class="t"><img src="<%=resource%>/imgs/network.png">联网设置</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mwifi")%>'>
                <div class="t"><img src="<%=resource%>/imgs/wifi.png">WIFI设置</div>
            </div>
            <div class="i active" link='<%=luci.dispatcher.build_url("web", "system", "mdevices")%>'>
                <div class="t"><img src="<%=resource%>/imgs/device.png">设备管理</div>
            </div>
            <div class="i" link='<%=luci.dispatcher.build_url("web", "system", "mfirewall")%>'>
                <div class="t"><img src="<%=resource%>/imgs/firewall.png">防火墙</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mdisk")%>'>
                <div class="t"><img src="<%=resource%>/imgs/disk.png">云盘</div>
            </div>
            <div class="i " link='<%=luci.dispatcher.build_url("web", "system", "mconfig")%>'>
                <div class="t"><img src="<%=resource%>/imgs/config.png">常规设置</div>
            </div>
        </div>
        <div class="content sp" ng-controller="deviceController">
            <div class="c">
                <div class="lb">
                    <span>设备管理</span>&nbsp; >&nbsp;
                    <span id="child-title">设备列表</span>
                </div>
                <div class="ct">
                    <div class="tct">
                        <div class="i" ng-repeat="item in devices">
                            <div class="is">
                                <div class="ib1 clearfix">
                                    <div class="ic">
                                        <div class="p1">
                                            <img src="<%=resource%>/imgs/pc.png">
                                        </div>
                                        <div class="p2">
                                            <div class="c2">
                                                <span class="hostname" title="{{item.hostname}}">{{item.hostname}}</span>
                                                <span class="blacklist" ng-if="item.access !== '1'">黑名单</span>
                                            </div>
                                            <div class="c3">
                                                在线时长：{{item.linktime}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ic">
                                        <div class="c1">
                                            <span>IP：{{item.ipaddr}}</span>
                                        </div>
                                        <div class="c1">
                                            <span>MAC：{{item.macaddr}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="ib2 clearfix">
                                    <div class="ic">
                                        <div class="c1">
                                            <img src="<%=resource%>/imgs/down.png">
                                            <div class="c-i">
                                                <span>下载速度：{{item.downspeed}}</span>
                                            </div>
                                            <div class="c-ii">
                                                <span>限制下载：{{item.downlimit}}</span>
                                            </div>
                                        </div>
                                        <div class="c1">
                                            <img src="<%=resource%>/imgs/up.png">
                                            <div class="c-i">
                                                <span>上传速度：{{item.upspeed}}</span>
                                            </div>
                                            <div class="c-ii">
                                                <span>限制上传：{{item.uplimit}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ic">
                                        <div style="margin-top:10px;">
                                            <button class="btn" ng-click="clickshowlimit(item)">限速&nbsp;&nbsp;
                                                <img src="<%=resource%>/imgs/up-btn.png" ng-if="item.showlimit">
                                                <img src="<%=resource%>/imgs/down-btn.png" ng-if="!item.showlimit">
                                            </button>
                                            <div class="blackBtn" style="display: inline-block;" ng-if="showBlBtn">
                                                <button ng-if='item.access === "1"' class="btn add-btn" ng-click="setBlist(item,0)" ng-disabled="isClick">加入黑名单</button>
                                                <button ng-if='item.access === "0"' class="btn del-btn" ng-click="setBlist(item,1)" ng-disabled="isClick">取消黑名单</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="id" ng-show="item.showlimit">
                                <div class="idc1 clearfix">
                                    <div class="idc">
                                        <span>下载速度：</span>
                                        <input type="text" ng-model="item.sdownlimit" value="0">
                                        <span>Kb/S</span>
                                    </div>
                                    <div class="idc">
                                        <span>上传速度：</span>
                                        <input type="text" ng-model="item.suplimit" value="0">
                                        <span>Kb/S</span>
                                    </div>
                                </div>
                                <div class="idc2 clearfix">
                                    <div class="idc"><span>(0为不限速,最大限速为100)</span></div>
                                    <div class="idc">
                                        <button class="sbtn" ng-click="cancelLimit(item)">取消限速</button>
                                        <button class="btn" ng-click="setLimit(item)">保存</button>
                                    </div>
                                </div>
                            </div>
                            <div class="d-line"></div>
                        </div>
                    </div>
                </div>
                <div id="footer">
                    <span> Copyright©2018 skywindlink.com All Rights Reserved.</span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            app.controller('deviceController', function($scope, $http) {
                $scope.showBlBtn = false;
                $scope.isClick = false;
                $scope.devices = '';
                $scope.cancelLimit = function(item) {
                    item.sdownlimit = 0;
                    item.suplimit = 0;
                    $scope.setLimit(item);
                };
                $scope.setLimit = function(item) {
                    item.sdownlimit = item.sdownlimit ? item.sdownlimit : 0;
                    item.suplimit = item.suplimit ? item.suplimit : 0;
                    var Sup = +item.suplimit;
                    var Sdown = +item.sdownlimit;
                    if ((Sdown || Sdown == 0) && (Sup || Sup == 0)) {
                        if (Sup <= 100 && Sup >= 0 && Sdown <= 100 && Sdown >= 0) {
                            var url = '<%=luci.dispatcher.build_url("web", "system", "speed")%>';
                            var data = {
                                ipaddr: item.ipaddr,
                                macaddr: item.macaddr,
                                uplimit: Sup,
                                downlimit: Sdown
                            };
                            $http({
                                method: 'POST',
                                url: url,
                                data: $.param(data),
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                                }
                            }).success(function(result) {
                                if (result.code == "0") {
                                    utils.alert("设置成功");
                                    $scope.refreshDevices();
                                } else {
                                    utils.alert("设置失败");
                                }
                            });
                        } else {
                            utils.alert('输入错误，设置失败')
                        }
                    } else {
                        utils.alert('输入错误，设置失败')
                    }
                };
                $scope.setBlack = function(item) {
                    var url = '<%=luci.dispatcher.build_url("web", "system", "blacklist")%>';
                    var data = {
                        macaddr: item.macaddr,
                        hostname: item.hostname,
                        access: 0
                    };
                    $http.post(url, data).success(function(result) {
                        console.log(result);
                    });
                };
                $scope.getdevices = function() {
                    var url = '<%=luci.dispatcher.build_url("web", "system", "devices")%>';
                    $http.post(url).success(function(data) {
                        $scope.devices = data.data;
                        $.each($scope.devices, function(i, item) {
                            item.showlimit = false;
                            item.linktime = utils.formatSeconds(item.linktime);
                        });
                        $scope.refreshDevices();
                    });
                };
                $scope.clickshowlimit = function(item) {
                    item.showlimit = !item.showlimit;
                    if (item.showlimit) {
                        $.each($scope.devices, function(i, item) {
                            item.showlimit = false;
                        })
                        item.showlimit = true;
                    }
                }
                $scope.init = function() {
                    $scope.getdevices();
                    $scope.getBlacklist();
                    $scope.setTime();
                };

                $scope.setTime = function () {
                    setInterval(function () {
                        $scope.refreshDevices();
                    },5000)
                };

                $scope.getBlacklist = function () {
                    var url = '<%=luci.dispatcher.build_url("web", "system", "filter")%>';
                    $http.post(url).success(function (data) {
                        if (data.code === 0) {
                            if (data.data.filter.enable === '1') {
                                $scope.showBlBtn = true;
                            } else {
                                $scope.showBlBtn = false;
                            }
                        }
                    })
                };

                $scope.setBlist = function (item, active) {
                    $scope.isClick = true;
                    var url = '<%=luci.dispatcher.build_url("web", "system", "setrules")%>';
                    var data = {
                        act: active,
                        mac: item.macaddr,
                        name: item.hostname,
                        rule: 'deny'
                    };
                    $http({
                        method: 'POST',
                        url: url,
                        data: $.param(data),
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                        }
                    }).success(function (data) {
                        if (data.code === 0) {
                            var URL = '<%=luci.dispatcher.build_url("web", "system", "filterset")%>';
                            var DATA = {
                                enable: '1',
                                rule: 'deny'
                            };
                            $http({
                                method: 'POST',
                                url: URL,
                                data: $.param(DATA),
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
                                }
                            }).success(function(res) {
                                if (res.code == 0) {
                                    utils.alert("操作成功！");
                                    $scope.isClick = false;
                                } else {
                                    utils.alert(res.msg);
                                }
                                $scope.getdevices();
                            });
                        } else {
                            console.log(data.msg);
                        }
                    })
                }

                $scope.refreshDevices = function() {
                    var url = '<%=luci.dispatcher.build_url("web", "system", "devices")%>';
                    $http.post(url).success(function(data) {
                        var devices = data.data;
                        var newMap = new Map();
                        angular.forEach(devices, function(item) {
                            newMap.put(item.macaddr, item);
                        });
                        var oldMap = new Map();
                        angular.forEach($scope.devices, function(item) {
                            oldMap.put(item.macaddr, item);
                        });
                        for (var i = 0; i < $scope.devices.length; i++) {
                            var item = $scope.devices[i];
                            if (!newMap.exist(item.macaddr)) {
                                $scope.devices.splice(i, 1);
                                i--;
                            } else {
                                var newitem = newMap.get(item.macaddr);
                                item.ipaddr = newitem.ipaddr;
                                item.macaddr = newitem.macaddr;
                                item.linktime = utils.formatSeconds(newitem.linktime);
                                item.hostname = newitem.hostname;
                                item.upspeed = utils.formateSpeed(+newitem.upspeed);
                                item.downspeed = utils.formateSpeed(+newitem.downspeed);
                                item.downlimit = +newitem.downlimit ? utils.formateLimitSpeed(+newitem.downlimit) : "0Kb/S";
                                item.uplimit = +newitem.uplimit ? utils.formateLimitSpeed(+newitem.uplimit) : "0Kb/S";
                                // item.sdownlimit = +newitem.downlimit ? Math.round(+newitem.downlimit * 100) / 100 : 0;
                                // item.suplimit = +newitem.uplimit ? Math.round(+newitem.uplimit * 100) / 100 : 0;
                            }
                        }
                        newMap.forEach(function(item) {
                            if (!oldMap.exist(item.macaddr)) {
                                item.showlimit = false;
                                $scope.devices.push(item);
                            }
                        })
                    });
                };
                $scope.init();
            });
        </script>
    </div>
</div>
<div id="phone-footer">
    <span> Copyright©2018 skywindlink.com All Rights Reserved.</span>
</div>
</body>

</html>